<script setup lang='ts'>
  import { onMounted, reactive, ref, provide } from 'vue';
  import { guild_roomApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import xmImage from '@/components/xmImage/index.vue';
  import roomForm from '../roomList/components/roomForm.vue';
  import certified from '../roomList/components/certified.vue';
  import closeRoom from '../roomList/components/closeRoom.vue';
  import wealthlist from './wealthlist.vue';
  import Pagination from "@/components/Pagination/index.vue";
  const roomFormRef = ref(),
  certifiedRef = ref(),
  closeRoomRef = ref(),
  wealthlistRef = ref();
  const action = reactive({
    total:0,
    list:[] as any[],
    roomTypeOptions: [] as Array<any>
  })
  const initialQuery = {
    page: 1,
    limit: 10,
    business_type: '',
    room_uid: '',
    room_id:'',
    uuid: '',
    name: '',
    desc: '',
    notice: '',
    room_type: '',
    certified: '',
    coefficient: '',
    sort: 'desc'
  }
  const listQuery = reactive({...initialQuery})
  const certifiedOptions = [
    { label: "未认证", value: 0 },
    { label: "已认证", value: 1 },
    { label: "整顿中", value: 2 },
  ]
  provide('certifiedOptions',certifiedOptions)
  const resetQuery = ()=>{
    Object.assign(listQuery,{...initialQuery})
    handleSerach()
  }
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const handleRoomForm = (row: any = {},formType='') => {
    roomFormRef.value.openDialog({
      ...row,
      roomTypeOptions:action.roomTypeOptions,
      formType
    })
  }
  const openDialog = (ref:any={},row:any={})=>{
    ref.openDialog(row)
  }
  const roomTypes = async()=>{
    const res = await guild_roomApi.getRoomType({ type: 1 })
    const { data=[] } = res
    action.roomTypeOptions = data;
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await guild_roomApi.getRooms(listQuery)
    loading.close()
    const { data=[], total=0, kk_total=0 } = res.data
    action.total = total
    action.list = data
  }
  onMounted(()=>{
    getList()
    roomTypes()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">房间UID：</div>
          <el-input v-model="listQuery.room_uid" placeholder="请输入房间UID" />
        </div>
        <div class="labelItem">
          <div class="label">房间ID：</div>
          <el-input v-model="listQuery.room_id" placeholder="请输入房间ID" />
        </div>
        <div class="labelItem">
          <div class="label">房间名：</div>
          <el-input v-model="listQuery.name" placeholder="请输入房间名" />
        </div>
        <div class="labelItem">
          <div class="label">房主UUID：</div>
          <el-input v-model="listQuery.uuid" placeholder="请输入房主UUID" />
        </div>
        <div class="labelItem">
          <div class="label">房间简介：</div>
          <el-input v-model="listQuery.desc" placeholder="请输入房间简介" />
        </div>
        <div class="labelItem">
          <div class="label">房间公告：</div>
          <el-input v-model="listQuery.notice" placeholder="请输入房间公告" />
        </div>
        <div class="labelItem">
          <div class="label">认证类型：</div>
          <el-select
          v-model="listQuery.room_type"
          clearable
          placeholder="请选择认证类型"
          @change="handleSerach">
            <el-option v-for="item in action.roomTypeOptions" :key="item.type_id" :label="item.type_name" :value="item.type_id" />
          </el-select>
        </div>
        <div class="labelItem">
          <div class="label">认证状态：</div>
          <el-select
          v-model="listQuery.certified"
          clearable
          placeholder="请选择认证状态"
          @change="handleSerach">
            <el-option v-for="item in certifiedOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border
    >
    <el-table-column width="100" prop="room_id" label="房间ID" />
      <el-table-column width="100" prop="room_uid" label="房间UID" />
      <el-table-column width="100" prop="user.uuid" label="房主UUID" />
      <el-table-column min-width="200" show-overflow-tooltip prop="name" label="房间名">
        <template #default="scoped">
          <el-tag
          class="pointer"
          @click="handleRoomForm(scoped.row,'name')"
          >{{ scoped.row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="140" label="房间封面">
        <template #default="scoped">
          <div class="roomImg relative">
            <xmImage :src="scoped.row.image" :list="[scoped.row.image]" />
            <div @click="handleRoomForm(scoped.row,'image')" class="roomImgBut pointer">
              <el-tag>编辑</el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="90" label="认证类型">
        <template #default="scoped">
          {{ scoped.row.room_type.type_name }}
        </template>
      </el-table-column>
      <el-table-column width="90" label="是否认证">
        <template #default="scope">
          <el-tag
          class="pointer" 
          @click="openDialog(certifiedRef,scope.row)"
          >{{ ["未认证", "已认证", "整顿中"][scope.row.certified] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" show-overflow-tooltip label="推荐系数">
        <template #default="scoped">
          <el-tag
          class="pointer"
          @click="handleRoomForm(scoped.row,'coefficient')"
          >{{ scoped.row.room_recommend?.coefficient || 0 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="200" show-overflow-tooltip prop="desc" label="房间简介">
        <template #default="scoped">
          <span @click="handleRoomForm(scoped.row,'desc')">{{ scoped.row.desc }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200" show-overflow-tooltip prop="notice" label="房间公告">
        <template #default="scoped">
          <span @click="handleRoomForm(scoped.row,'notice')">{{ scoped.row.notice }}</span>
        </template>
      </el-table-column>
      <el-table-column width="240" fixed="right" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="openDialog(wealthlistRef,scope.row)" >房间流水</el-button>
          <el-button type="danger" @click="openDialog(closeRoomRef,scope.row)" >关闭房间</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <roomForm ref="roomFormRef" @update-list="getList" />
    <certified ref="certifiedRef" @update-list="getList" />
    <closeRoom ref="closeRoomRef" />
    <wealthlist ref="wealthlistRef" />
  </div>
</template>